<template>
  <div class="container">
    <van-image
        width="15rem"
        height="10rem"
        fit="contain"
        src="https://javawebprogram.oss-cn-beijing.aliyuncs.com/0bccf4e6-d60d-4dae-b89c-6847c0a04935.jpg"
    />
  </div>
  <div>
    <van-form @submit="onSubmit">
      <div>
        <van-cell-group inset>
          <van-field
              style="margin: 5px 0"
              v-model="createTeamData.name"
              name="name"
              label="队伍名称"
              placeholder="请输入队伍名称"
              :rules="[{ required: true, message: '请输入队伍名称' }]"
          />
          <van-field
              style="margin: 5px 0"
              v-model="createTeamData.description"
              rows="2"
              autosize
              label="队伍描述"
              type="textarea"
              maxlength="512"
              placeholder="请输入队伍描述"
              show-word-limit
          />
          <van-field
              style="margin: 5px 0"
              v-model="displayExpireTime"
              is-link
              readonly
              name="expireTime"
              label="过期时间"
              placeholder="点击选择过期时间"
              @click="showPicker = true"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-date-picker @confirm="onConfirm" @cancel="showPicker = false"/>
          </van-popup>
          <van-field name="maxNum" label="队伍人数" style="margin: 5px 0">
            <template #input>
              <van-stepper style=""
                           v-model="createTeamData.maxNum"
                           theme="round"
                           button-size="22"
                           disable-input
                           min="1"
                           max="20"
              />
            </template>
          </van-field>
          <van-field name="status" label="队伍状态" style="margin: 5px 0">
            <template #input>
              <van-radio-group v-model="createTeamData.status" direction="horizontal">
                <van-radio name="0">公开</van-radio>
                <van-radio name="1">私密</van-radio>
                <van-radio name="2">加密</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-if="createTeamData.status === '2'"
              style="margin: 5px 0"
              v-model="createTeamData.password"
              name="password"
              type="password"
              label="密码"
              placeholder="请输入队伍密码"
              :rules="[{ required: true, message: '请输入队伍密码' }]"
          />
        </van-cell-group>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          创建队伍
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue';
import {showSuccessToast} from "vant";
import {useRouter} from "vue-router";
import {saveTeam} from "../../api/Team.ts";

const router = useRouter();

// 默认数据
const initData =
    {
      "name": "",
      "description": "",
      "expireTime": "",
      "maxNum": 5,
      "pageIndex": 0,
      "pageSize": 0,
      "password": "",
      "status": 0,
    };
// 用户输入的响应式数据
const createTeamData = ref({...initData});
const showPicker = ref(false);
const displayExpireTime = ref('')

// 点击确认日期触发的函数
const onConfirm = ({selectedValues}) => {
  createTeamData.value.expireTime = selectedValues.join('-') + "T00:00:00Z";
  displayExpireTime.value = selectedValues.join('-');
  showPicker.value = false;
};


// 点击创建队伍时触发的函数
const onSubmit = async (values) => {
  // 格式化队伍状态信息
  const postData = ref({
    ...createTeamData.value,
    status: Number(createTeamData.value.status),
  });
  // TODO 前端参数校验
  const result = await saveTeam(postData.value);
  console.log(result);
  if(result?.code === 0 && result?.data){
    showSuccessToast('创建成功');
    router.push({
      path: '/team',
      replace: true,
    });
  }else{
    showSuccessToast('创建失败');
  }
};


</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 10px 0;
}
</style>